<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>可点科技(KE POINTS)</title>

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="../css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
 		<link rel="stylesheet" href="../css/animate.css">
    <!-- Custom styles for this template -->
    <link href="../css/carousel.css" rel="stylesheet">
    <style>
    	.navbar{
    		margin-bottom: 0;
    	}
    	.navbar-wrapper{
    		transition: 0.5s;
    	}
    	.axure-index{
    		color: black;
    		font-size: 24px;
    	}
    	.axure-index:hover{
    		color: black;
    	}
        .carousel-caption .topTitle{
          color: white;
        }
        .carousel-caption .topTitle{
          color: white;
        }
    	.list-logo{
    		display: flex;
		    justify-content: center;
		    flex-wrap: wrap;
		    position: relative;
            margin-bottom: 60px;
    	}
        .list-logo .col-lg-2{
          margin-top: 20px;
          cursor: pointer;
        }
        .list-logo .col-lg-2:hover .img-logo{
          box-shadow: 0 2px 8px rgba(0,0,0,.09),0 4px 20px rgba(0,0,0,.24);
          /*background-size: 60% 50%;*/
        }
    	.list-logo>div{
    		text-align: center;
    	}
    	.list-logo>div>h2{
    		font-size: 14px;
            color: #999999;
    	}
        .img-logo{
          width: 120px;
          height: 120px;
          border-radius: 50%;
          border: 1px solid #cccccc;
          margin: 0 auto;
          transition: box-shadow 80ms ease-in-out, width 0.4s ease 0.2s, box-shadow 80ms ease-in-out, opacity 300ms ease-in-out;
        }

        .img-logo1{
          background: url("../img/xhicon26.png") center center no-repeat;
        }
        .img-logo2{
          background: url("../img/xhicon37.png") center center no-repeat;
        }
        .img-logo3{
          background: url("../img/icon_xcx.png") center center no-repeat;
        }
        .img-logo4{
          background: url("../img/icon_wx.png") center center no-repeat;
        }
        .img-logo5{
          background: url("../img/xhicon36.png") center center no-repeat;
        }
    	.list-logo-title{
    		position: absolute;
    		top: -45px;
    		left: 50%;
    		transform: translateX(-50%);
            font-size: 22px;
    	}
    	.list-steps{
    		 display: flex;
		     justify-content: center;
		     flex-wrap: wrap;
		     position: relative;
		     text-align: center;
             padding-top: 100px;
             border-top: 1px solid #eee;
             border-bottom: 1px solid #eee;
             background: #f3f3f3;
             padding-bottom: 80px;
    	}
    	.end-info{
    		text-align: center;
            background: #f3f3f3;
          padding-bottom: 60px;
    	}
    	.end-info h3{
    		font-size: 30px;
    		font-weight: 400;
    	}
    	.end-info p{
    		width: 80%;
    		margin: 10px auto;
    	}
    	.end-info button{
    		  width: 156px;
    			height: 47px;
    			margin-top: 25px;
    	}
    	.footContact{
    		text-align: center;
    		margin-top: 30px;
    	}
    	.bannerLeft,.bannerRight{
    		position: absolute;
    		top: 50%;
    		font-size: 25px;
    	}
    	.bannerLeft{
    		left: 4%;
    	}
    	.bannerRight{
    		right: 4%;
    	}
    	.list-steps-all>span{
          transition: all 0.2s ease-in-out 0s;
          display: inline-block;
          height: 150px;
          width: 130px;
          display: inline-flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-left: 15px;
          margin-bottom: 5px;
          border-style:solid;
          border-color:#bbbbbb;
          border-width:0.8px;
        }
        .steps-logo{
          display: inline-block;
          width: 60%;
          height: 100px;
          margin-bottom: 10px;
        }
        .steps-logo1{
          background: url("../img/demand.png") center center no-repeat;
          background-size: 100% auto;
        }
        .steps-logo2{
          background: url("../img/assessment.png") center center no-repeat;
          background-size: 100% auto;
        }
        .steps-logo3{
          background: url("../img/contract.png") center center no-repeat;
          background-size: 100% auto;
        }
        .steps-logo4{
          background: url("../img/devel.png") center center no-repeat;
          background-size: 100% auto;
        }
        .steps-logo5{
          background: url("../img/acceptance.png") center center no-repeat;
          background-size: 100% auto;
        }
        .steps-logo6{
          background: url("../img/online.png") center center no-repeat;
          background-size: 100% auto;
        }
        .steps-logo7{
          background: url("../img/service.png") center center no-repeat;
          background-size: 100% auto;
        }
    	.list-steps-all:hover>span{
    		cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,.09),0 4px 20px rgba(0,0,0,.24);
    		transform: translateY(-25px);
    	}
    	a:hover{
    		text-decoration: none;
    	}
    	a{
    		text-decoration: none;
    	}
    	.navbar-nav li a{
    		color: rgba(255, 255, 255, 0.4);
    	}
    	.axure-index{
    		color: rgba(255, 255, 255, 0.4);
    	}
    	.navbar-nav .active a{
    		color: #fff !important;
    	}
    	.nav>li>a:hover{
    		background: none;
    		color: #fff;
    	}
        .ani-img1 img,.ani-img2 img,.ani-img3 img{
          witdh: 374px;
          height: 374px;
        }
      footer{
        background: #333;
        padding-top: 30px;
        color: white;
      }
      .featurette{
        padding: 15px;
      }
      .featurette .featurette-heading{
        margin-bottom: 20px;
      }
      .featurette .lead{
        font-size: 20px;
        margin: 10px;
      }

    </style>
  </head>
<!-- NAVBAR
================================================== -->
  <body>
    <div class="navbar-wrapper">
      <div class="container">
        <nav class="navbar navbar-static-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand axure-index" href="#">可点科技</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="./server.html">服务</a></li>
                <li><a href="./technology.html">技术</a></li>
                <li><a href="./about.html">关于我们</a></li>
                <!--<li class="dropdown">-->
                  <!--<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>-->
              </ul>
              <ul class="nav navbar-nav navbar-right">
              	<li><a href="./register.html">注册</a></li>
              	<li><a href="./login.html">登录</a></li>
              </ul>
            </div>
          </div>
        </nav>

      </div>
    </div>


    <!-- Carousel
    ================================================== -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img class="first-slide" src="../img/banner-program-1.jpg" alt="First slide">
          <div class="container">
            <div class="carousel-caption">
              <h1 class="topTitle">创意与灵感</h1>
              <p></p>
              <h3 class="bottomTitle">从0到1</h3>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="second-slide" src="../img/banner-program-2.jpg" alt="Second slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>心触碰，新抵达</h1>
              <p></p>
              <h3>未来触手可及</h3>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="third-slide" src="../img/banner-program-3.jpg" alt="Third slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>设计到开发</h1>
              <p></p>
              <h3>匠心独到，尽显精致</h3>
            </div>
          </div>
        </div>
      </div>
      <a class="bannerLeft glyphicon glyphicon-chevron-left" href="#myCarousel" role="button" data-slide="prev">
        
      </a>
      <a class="bannerRight glyphicon glyphicon-chevron-right" href="#myCarousel" role="button" data-slide="next">
       
      </a>
    </div><!-- /.carousel -->


    <!-- Marketing messaging and featurettes
    ================================================== -->
    <!-- Wrap the rest of the page in another container to center all the content. -->

    <div class="marketing">
      <!-- Three columns of text below the carousel -->
      <div class="row list-logo">
      	<div class="list-logo-title">设计、研发范围</div>
        <div class="col-lg-2">
          <div class="img-logo img-logo1"></div>
          <h2>网站</h2>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-2">
          <div class="img-logo img-logo2"></div>
          <h2>移动APP</h2>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-2">
          <div class="img-logo img-logo3"></div>
          <h2>小程序开发</h2>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-2">
          <div class="img-logo img-logo4"></div>
          <h2>微信公众号开发</h2>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-2">
          <div class="img-logo img-logo5"></div>
          <h2>html应用</h2>
        </div><!-- /.col-lg-4 -->
      </div><!-- /.row -->
 			
      <div class="row list-steps">
      	<div class="list-logo-title bounceInLeft" style="top: 40px;">项目流程</div>
        <div class="list-steps-all">
          <span>
            <span class="steps-logo steps-logo1"></span>
            <span>确认需求</span>
          </span>
        </div><!-- /.col-lg-4 -->
        <div class="list-steps-all">
          <span>
            <span class="steps-logo steps-logo2"></span>
            <span>评估周期与报价</span>
          </span>
        </div><!-- /.col-lg-4 -->
        <div class="list-steps-all">
          <span>
            <span class="steps-logo steps-logo3"></span>
            <span>签订合同</span>
          </span>
        </div><!-- /.col-lg-4 -->
        <div class="list-steps-all">
          <span>
            <span class="steps-logo steps-logo4"></span>
            <span>设计及程序开发</span>
          </span>
        </div><!-- /.col-lg-4 -->
        <div class="list-steps-all">
          <span>
            <span class="steps-logo steps-logo5"></span>
            <span>客户验收</span>
          </span>
        </div><!-- /.col-lg-4 -->
        <div class="list-steps-all">
          <span>
            <span class="steps-logo steps-logo6"></span>
            <span>培训上线</span>
          </span>
        </div><!-- /.col-lg-4 -->
        <div class="list-steps-all">
          <span>
            <span class="steps-logo steps-logo7"></span>
            <span>售后服务</span>
          </span>
        </div><!-- /.col-lg-4 -->
      </div><!-- /.row -->
      <!-- START THE FEATURETTES -->

      <div class="row featurette">
      	<div class="col-md-5 ani-img1">
          <img class="featurette-image img-responsive center-block" src="../img/our_idea.jpg" alt="Generic placeholder image">
        </div>
        <div class="col-md-7">
          <h2 class="featurette-heading">我们的理念</h2>
          <p class="lead">1.组建百人研发、设计团队提供技术支持。</p>
          <p class="lead">2.寻找多位专业投资人组成投委会。</p>
          <p class="lead">3.寻找海量有激情、有想法、有资源的创业者，共同进步。</p>
        </div>
      </div>

      <!--<hr class="featurette-divider">-->

      <div class="row featurette" style="background:#f3f3f3;padding-bottom: 30px">
        <div class="col-md-7">
          <h2 class="featurette-heading">我们的优势</h2>
          <p class="lead">1.我们有后台、前端、Android、iOS、产品设计、UI设计、测试、运营...</p>
          <p class="lead">2.我们可以做网站、后台管理、app、小程序、微信公众号、h5应用...</p>
          <p class="lead">3.我们可以打造技术VC、推荐工作、人才流动、项目流动、技术咨询、技术共享的环境</p>
          <p class="lead">4.我们还会有更多小伙伴的加入</p>
        </div>
        <div class="col-md-5 ani-img2">
          <img class="featurette-image img-responsive center-block" src="../img/our_advantage.jpg" alt="Generic placeholder image">
        </div>
      </div>

      <!--<hr class="featurette-divider">-->

      <div class="row featurette">
      	<div class="col-md-5 ani-img3">
          <img class="featurette-image img-responsive center-block" src="../img/our_business.png" alt="Generic placeholder image">
        </div>
        <div class="col-md-7">
          <h2 class="featurette-heading">行业解决</h2>
          <p class="lead">1.电商类：会员管理、商品展示、订单管理、加盟管理、物流/计费、统计报表、运营管理、优惠券</p>
          <p class="lead">2.餐饮类：餐厅加盟、餐厅搜索、在线支付、在线点餐、精准定位、积分系统、会员管理、顾客点评</p>
          <p class="lead">3.家政类：家政预约、家政工展示、家政工管理、在线支付、客服系统、客户评价、精准定位</p>
          <p class="lead">4.社交类：互动游戏、好友管理、表情管理、音/视频通话、视频直播、朋友圈</p>
        </div>
      </div>

     <!--<hr class="featurette-divider  end-hr">-->
			
     <div class="row end-info" >
     		<div class="col-md-12">
     				<h3>心动了吗？立刻开始吧！</h3>
     				<p>发布APP定制需求，免费APP评估</p>
     				<button type="button" class="btn btn-info">发布需求</button>
     		</div>
     </div>

 			<!--<hr class="featurette-divider">-->
      <!-- FOOTER -->
      <footer>
      	<div class="row" >
      		<div class="col-md-5">
          	<img class="featurette-image img-responsive center-block" data-src="holder.js/220x220/auto" alt="Generic placeholder image">
        	</div>
	        <div class="col-md-7">
	         	<p>上海可点科技</p>
	         	<p>地址：xxxx</p>
	         	<p>微信：xxxx</p>
	         	<p>邮箱：xxxx@163.com</p>
	         	<p>24小时手机：xxxxxxxxx</p>
	        </div>
	      </div>  
        <p class="pull-right"><a href="#">回到顶部</a></p>
        <p class="footContact">&copy; AxureMaster by Jinni 2016 © &middot;</p>
			</footer>
    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
    <script src="../js/holder.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../js/ie10-viewport-bug-workaround.js"></script>
    <script type="text/javascript">
    		$(function(){
    			$(window).scroll(function(e){
    				if($(window).scrollTop()>0){
    					 $('.navbar-wrapper').css({
    					 	'background':'rgba(0, 0, 0, 0.7)',
    					 	'position':'fixed'
    					 })
    				}else{
    					$('.navbar-wrapper').css({
    						'background':'transparent',
    						'position':'absolute'
    					})
    				}
    				if ($(window).scrollTop()>600) {
    					$('.ani-img1').addClass('animated rubberBand')
    				}
    				if($(window).scrollTop()>1200) {
    					$('.ani-img2').addClass('animated zoomIn')
    				} 
    				if($(window).scrollTop()>1600){
    					$('.ani-img3').addClass('animated jackInTheBox')
    				}
    			})
    		})
    </script>
  </body>
</html>